<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap 初体验</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      body {
          position: relative;
      }
      #navbar{
          background:#aab;
          position:fixed;
          left:100px;
          top:50px;
      }
  </style>
  </head>
  <body data-spy="scroll" data-target="#navbar">
    <div id="navbar">
      <ul class="nav nav-tabs" role="tablist">
        <li><a href="#AAAA">家电</a></li>
        <li><a href="#BBBB">电子设备</a></li>
        <li><a href="#CCCC">日常用品</a></li>
        <li><a href="#DDDD">运动</a></li>
      </ul>
    </div>

    <ul class="list-unstyled">
      <li id="AAAA"><img src="holder.js/100px500?text=家电" alt=""></li>
      <li id="BBBB"><img src="holder.js/100px500?bg=#aef&text=电子设备" alt=""></li>
      <li id="CCCC"><img src="holder.js/100px500?bg=#eea&text=日常用品" alt=""></li>
      <li id="DDDD"><img src="holder.js/100px500?bg=#aab&text=运动" alt=""></li>
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.8/holder.min.js"></script>

  </body>
</html>